<template>
  <h3 class="me-title">
    <Link class="icon" />
    {{title}}
  </h3>
</template>

<script setup name="TitleCard">
import { Link } from "@vicons/fa";
const Props = defineProps({
  title: {
    type: String,
    default: ""
  }
})
</script>

<style lang="scss" scoped>
.icon {
  width: 20px;
  height: 20px;
  color: #f47466;
  transition: all 0.2s ease-out;
  margin-bottom: -3px;
}
.me-title {
  width: 100%;
  transition: all 0.2s ease-out;
}
.me-title:hover {
  transform: translateX(20px);
  .icon {
    color: #49b1f5;
  }
}

@media (max-width: 580px) {
  h3 {
    margin: 13px 0;
  }
}
</style>
